<template>
  <a-card class="general-card" title="我的项目">
    <!-- <template #extra>
      <a-link>{{ $t('userInfo.showMore') }}</a-link>
    </template> -->
    <a-row :gutter="16">
      <a-col
        v-for="(project, index) in projectList"
        :key="index"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="8"
        :xxl="8"
        class="my-project-item"
      >
        <a-card>
          <!-- <a-skeleton v-if="loading" :loading="loading" :animation="true">
            <a-skeleton-line :rows="3" />
          </a-skeleton> -->
          <a-space direction="vertical">
            <a-typography-text bold>{{ project.name }}</a-typography-text>
            <a-typography-text type="secondary">
              {{ project.description }}
            </a-typography-text>
            <a-button  type="primary" @click="enterProject(project.name,project.projectID)">
              进入项目
            </a-button>
            <a-space>
              <!-- <a-avatar-group :size="24">
                {{ project.contributors }}
                <a-avatar
                  v-for="(contributor, idx) in project.contributors"
                  :key="idx"
                  :size="32"
                >
                  <img alt="avatar" :src="contributor.avatar" />
                </a-avatar>
              </a-avatar-group> -->
              <!-- <a-typography-text type="secondary">
                等{{ project.peopleNumber }}人
              </a-typography-text> -->
            </a-space>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script lang="ts" >
  import { removeMyInterceptor } from '@/api/interceptor';

import axios from 'axios';
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
  export default defineComponent({

    setup(){
      const router = useRouter();
          var projectList = ref([{
            name:'',
            description:'',
            projectID:0,
          }]);
          const enterProject = (name:string ,id:number ) => {
          // localStorage.setItem("teamID",id as unknown as string);
          localStorage.setItem("projectID",id as unknown as string);
          localStorage.setItem("fromWhere",'777');   // 判断是文档是否文档中心进入
          localStorage.setItem("projectName", name);
          // console.log(ID)
          // console.log(id)
          router.push({
            name: 'project',
          });
      }
      return{
          projectList,
          enterProject
      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.getProjects();
      })
    },
    methods:{
      getProjects(){
        removeMyInterceptor();
        axios({
          method: 'post',           /* 指明请求方式，可以是 get 或 post */
          url: 'user/projectList',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
          data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
            userID:localStorage.getItem('id')
          })
        }).then( (response) => {
          // console.log('请求成功');
          var _this = this;
          if (response.data.code === 0) {
            console.log(response.data.message);
            _this.projectList = [];
            for(var i = 0;i<response.data.data.length; i++){
              _this.projectList = _this.projectList.concat({
                name:response.data.data[i].name,
                description:response.data.data[i].description,
                projectID:response.data.data[i].projectID,
              })
            }
            console.log('加载项目列表成功');
      

          } else {
            console.log('加载项目列表失败');
            console.log(response)
          }
        }).catch(function () {
          console.log('请求失败');
        });

      }
    }
  });

</script>

<style scoped lang="less">
  :deep(.arco-card-body) {
    min-height: 128px;
    padding-bottom: 0;
  }
  .my-project {
    &-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    &-title {
      margin-top: 0 !important;
      margin-bottom: 18px !important;
    }

    &-list {
      display: flex;
      justify-content: space-between;
    }

    &-item {
      // padding-right: 16px;
      margin-bottom: 16px;

      &:last-child {
        padding-right: 0;
      }
    }
  }
</style>
